﻿@{
    Layout = "";
}

<style>
    .btn-examples {
        display: flex;
        gap: 6px;
        margin-bottom: 2.5rem;
        flex-wrap: wrap;
        align-items: center;
    }
</style>

<!-- Badges -->
<h3 class="mb-2">Default</h3>
<div class="btn-examples">
    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-secondary">Secondary</span>
    <span class="badge badge-warning"><i class="fa fa-tags"></i>Warning</span>
    <span class="badge badge-success">Success</span>
    <span class="badge badge-info"><i class="fa fa-angle-right"></i>Info</span>
    <span class="badge badge-danger">Danger</span>
    <span class="badge badge-gray"><i class="fa fa-cog"></i>Gray<a href="javascript:;" class="btn-close"></a></span>
    <span class="badge badge-light">Light</span>
    <span class="badge badge-dark">Deal</span>
</div>

<h3 class="mb-2">Subtle</h3>
<div class="btn-examples">
    <span class="badge badge-subtle badge-primary">Primary</span>
    <span class="badge badge-subtle badge-secondary">Secondary</span>
    <span class="badge badge-subtle badge-warning"><i class="fa fa-tags"></i>Warning</span>
    <span class="badge badge-subtle badge-success">Success</span>
    <span class="badge badge-subtle badge-info"><i class="fa fa-angle-right"></i>Info</span>
    <span class="badge badge-subtle badge-danger">Danger</span>
    <span class="badge badge-subtle badge-gray"><i class="fa fa-cog"></i>Gray<a href="javascript:;" class="btn-close"></a></span>
    <span class="badge badge-subtle badge-light">Light</span>
    <span class="badge badge-subtle badge-dark">Deal</span>
</div>

<h3 class="mb-2">Subtle with ring</h3>
<div class="btn-examples bg-light rounded p-3">
    <span class="badge badge-subtle badge-ring badge-primary">Primary</span>
    <span class="badge badge-subtle badge-ring badge-secondary">Secondary</span>
    <span class="badge badge-subtle badge-ring badge-warning"><i class="fa fa-tags"></i>Warning</span>
    <span class="badge badge-subtle badge-ring badge-success">Success</span>
    <span class="badge badge-subtle badge-ring badge-info"><i class="fa fa-angle-right"></i>Info</span>
    <span class="badge badge-subtle badge-ring badge-danger">Danger</span>
    <span class="badge badge-subtle badge-ring badge-gray"><i class="fa fa-cog"></i>Gray<a href="javascript:;" class="btn-close"></a></span>
    <span class="badge badge-subtle badge-ring badge-light">Light</span>
    <span class="badge badge-subtle badge-ring badge-dark">Deal</span>
</div>

<h3 class="mb-2">Outlined badges</h3>
<div class="btn-examples">
    <span class="badge badge-outline badge-primary">Primary</span>
    <span class="badge badge-outline badge-secondary">Secondary</span>
    <span class="badge badge-outline badge-warning"><i class="fa fa-tags"></i>Warning</span>
    <span class="badge badge-outline badge-success">Success</span>
    <span class="badge badge-outline badge-info"><i class="fa fa-angle-right"></i>Info</span>
    <span class="badge badge-outline badge-danger">Danger</span>
    <span class="badge badge-outline badge-gray"><i class="fa fa-cog"></i>Gray<a href="javascript:;" class="btn-close"></a></span>
    <span class="badge badge-outline badge-light">Light</span>
    <span class="badge badge-outline badge-dark">Deal</span>
</div>

<h3 class="mb-2">Pill badges</h3>
<div class="btn-examples">
    <span class="badge badge-pill badge-primary">Primary</span>
    <span class="badge badge-pill badge-secondary">Secondary</span>
    <span class="badge badge-pill badge-warning"><i class="fa fa-tags"></i>Warning</span>
    <span class="badge badge-pill badge-success">Success</span>
    <span class="badge badge-pill badge-info"><i class="fa fa-angle-right"></i>Info</span>
    <span class="badge badge-pill badge-danger">Danger</span>
    <span class="badge badge-pill badge-gray"><i class="fa fa-cog"></i>Gray<a href="javascript:;" class="btn-close"></a></span>
    <span class="badge badge-pill badge-light">Light</span>
    <span class="badge badge-pill badge-dark">Deal</span>

    <span class="badge badge-pill badge-outline badge-primary">Primary</span>
    <span class="badge badge-pill badge-outline badge-secondary">Secondary</span>
    <span class="badge badge-pill badge-outline badge-warning"><i class="fa fa-tags"></i>Warning</span>
    <span class="badge badge-pill badge-outline badge-success">Success</span>
    <span class="badge badge-pill badge-outline badge-info"><i class="fa fa-angle-right"></i>Info</span>
    <span class="badge badge-pill badge-outline badge-danger">Danger</span>
    <span class="badge badge-pill badge-outline badge-gray"><i class="fa fa-cog"></i>Gray<a href="javascript:;" class="btn-close"></a></span>
    <span class="badge badge-pill badge-outline badge-light">Light</span>
    <span class="badge badge-pill badge-outline badge-dark">Deal</span>
</div>

<h3 class="mb-2">Large badges (as links)</h3>
<div class="btn-examples">
    <a href="javascript:;" class="badge badge-lg badge-pill badge-primary">Primary</a>
    <a href="javascript:;" class="badge badge-lg badge-pill badge-ring badge-secondary">Secondary</a>
    <a href="javascript:;" class="badge badge-lg badge-pill badge-ring badge-subtle badge-secondary">Secondary subtle<span class="btn-close"></span></a>
    <a href="javascript:;" class="badge badge-lg badge-pill badge-ring badge-subtle badge-warning"><i class="fa fa-tags"></i>Warning</a>
    <a href="javascript:;" class="badge badge-lg badge-pill badge-success">Success</a>
    <a href="javascript:;" class="badge badge-lg badge-pill badge-outline badge-success">Success Outline</a>
    <a href="javascript:;" class="badge badge-lg badge-pill badge-subtle badge-ring badge-info"><i class="fa fa-angle-right"></i>Info</a>
    <a href="javascript:;" class="badge badge-lg badge-pill badge-danger">Danger</a>
    <a href="javascript:;" class="badge badge-lg badge-pill badge-outline badge-danger">Danger Outline</a>
    <span href="javascript:;" class="badge badge-lg badge-pill badge-gray"><i class="fa fa-cog"></i>Gray<a href="javascript:;" class="btn-close"></a></span>
    <a href="javascript:;" class="badge badge-lg badge-pill badge-ring badge-light">Light</a>
    <a href="javascript:;" class="badge badge-lg badge-pill badge-dark">Deal</a>
</div>

<h3 class="mb-2">Counter badges</h3>
<div class="btn-examples">
    <span class="badge badge-pill badge-counter badge-danger">2</span>
    <span class="badge badge-pill badge-counter badge-success">99</span>
    <span class="badge badge-pill badge-counter badge-dark">1.458</span>
    <span class="badge badge-counter badge-warning">21</span>
    <button type="button" class="btn btn-secondary btn-sm btn-icon position-relative">
        <i class="fa fa-fw fa-filter"></i>
        <span class="badge badge-pill badge-counter badge-counter-ring badge-danger edge-top-end">2</span>
    </button>
    <button type="button" class="btn btn-primary btn-sm position-relative ml-2">
        <span>Inbox</span>
        <span class="badge badge-pill badge-counter badge-counter-ring badge-danger edge-top-end">99+</span>
    </button>
</div>

<h3 class="mb-2">Relative sizing</h3>
<div class="btn-examples flex-column-reverse align-items-start">
    <h1>Example heading <span class="badge badge-secondary rounded"><i class="fa fa-tags"></i>New<a href="javascript:;" class="btn-close"></a></span></h1>
    <h2>Example heading <span class="badge badge-secondary rounded"><i class="fa fa-tags"></i>New<a href="javascript:;" class="btn-close"></a></span></h2>
    <h3>Example heading <span class="badge badge-secondary"><i class="fa fa-tags"></i>New<a href="javascript:;" class="btn-close"></a></span></h3>
    <h4>Example heading <span class="badge badge-secondary"><i class="fa fa-tags"></i>New<a href="javascript:;" class="btn-close"></a></span></h4>
    <h5>Example heading <span class="badge badge-secondary"><i class="fa fa-tags"></i>New<a href="javascript:;" class="btn-close"></a></span></h5>
    <h6>Example heading <span class="badge badge-secondary"><i class="fa fa-tags"></i>New<a href="javascript:;" class="btn-close"></a></span></h6>
    <div>Example text <span class="badge badge-secondary"><i class="fa fa-tags"></i>New<a href="javascript:;" class="btn-close"></a></span></div>
    <div style="font-size: 14px">Example text <span class="badge badge-secondary"><i class="fa fa-tags"></i>New<a href="javascript:;" class="btn-close"></a></span></div>
</div>
